<template>
<div class="showpicWrapper">
  <draggable element="div" v-model="plist" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false" @change="hlChange">
    <transition-group type="transition" :name="'flip-list'" class="ui doubling cards" tag="div">

      <div v-for="(val,index) in plist" @click='showBigPic(val)' class="ui card" :key="index">
        <i class='icon circular tiny close' @click.stop='toRemove(val)'></i>
        <div class="image" >
          <img :src="val" alt="点击可看大图">
        </div>
      </div>
    </transition-group>
  </draggable>
</div>
</template>

<script type="text/ecmascript-6">
import tool from 'src/util/tool';
import draggable from 'vuedraggable';
import util from '_util/index';


export default {
  data() {
    return {
      plist: [],
      editable: true,
      isDragging: false,
      delayedDragging: false
    }
  },
  components: {
    draggable,
  },
  methods: {
    hlChange() {
      this.$emit('sorted', this.plist)
    },
    onMove({
      relatedContext,
      draggedContext
    }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      // tool.cl(relatedElement, draggedElement)
      // return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      return true
    },
    showBigPic(img) {
        util.eventEmit(this, 'show_pic_real', {img});
    },
    toRemove(val) {
        this.plist.remove(val);
      let nval = val.replace(this.imgpre, '')
      this.$emit('toRemove', nval)
    },
    setList(pics) {
      let tmp = []
      if (pics.length > 0) {
        tmp = pics.map(val => {
          if (val)
            return this.imgpre + val
        })
      }
        this.plist = tmp || [];
    }
  },
  watch: {
    pics: function(val, old) {
      if (val != old) {
        this.setList(val)
      }
    },
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true
        return
      }
      this.$nextTick(() => {
        this.delayedDragging = false
      })
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: 'description',
        disabled: !this.editable,
        ghostClass: 'ghost'
      };
    },
    placeholder() {
      return `请输入${this.field.title}`
    },
  },
  props: ['field', 'pics','imgpre'],
  created() {
    this.setList(this.pics)

  },
  mounted() {}
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
    @import "../../common/style/mixin";
.flip-list-move {
    transition: transform 0.5s;
}
.showpicWrapper{

    .ui.cards > .card {
        width: 120px;
        position: relative;
        cursor: pointer;
        .icon.close {
            z-index:1;
            .circular_icon();
            right: -10px;
            border-radius: .5rem!important;
            .icon_hover_white();
        }
    }
    .ui.cards {
        margin-top: 10px;
    }
}

</style>
